<template>
  <div class="sub-container">
    <div class="filter-container">
      <div class="right-block">
        <el-input v-model="keyword" style="width: 200px;margin-right: 10px" suffix-icon="el-icon-search" size="small" placeholder="输入编码或名称"/>
        <el-button type="primary" size="small" @click="addHandler">新增</el-button>
        <el-button type="primary" size="small" @click="multipleDeleteHandler">批量删除</el-button>
      </div>
    </div>
    <div class="table-title">拨款种类列表</div>
    <el-table
      ref="multipleTable"
      :border="true"
      :data="tableData"
      :header-cell-style="{textAlign: 'center'}"
      :cell-style="{textAlign: 'center'}"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"/>
      <el-table-column
        prop="name"
        label="编码"/>
      <el-table-column
        prop="name"
        label="摘要"/>
      <el-table-column
        prop="name"
        label="备注"/>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="editRow(scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-pagination">
      <pagination/>
    </div>
    <el-dialog :visible.sync="dialogVisible" :title="dialogType === 'add'?'新增拨款种类':'编辑拨款种类'">
      <el-form ref="form" :model="form" :rules="rules" label-width="40px">
        <el-form-item label="编码" prop="encode">
          <el-input v-model="form.encode"/>
        </el-form-item>
        <el-form-item label="摘要" prop="name">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="备注" prop="mark">
          <el-input v-model="form.mark"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="okHandler">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
function createForm(tar) {
  let raw = {
    encode: '',
    name: '',
    mark: ''
  }
  if (tar) {
    raw = Object.assign(raw, tar)
  }
  return raw
}
export default {
  name: 'AppropriationType',
  components: { Pagination },
  data() {
    return {
      keyword: '',
      dialogVisible: false,
      dialogType: 'add',
      form: createForm(),
      rules: {},
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      multipleSelection: []
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    editRow(row) {
      this.form = createForm(row)
      this.dialogVisible = true
      this.dialogType = 'edit'
    },
    deleteRow() {

    },
    addHandler() {
      this.form = createForm()
      this.dialogVisible = true
      this.dialogType = 'add'
    },
    okHandler() {

    },
    multipleDeleteHandler() {
      console.log(this.multipleSelection)
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'info',
          message: '至少选择一项'
        })
        return false
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>

